<template>
  <div>
    <span>全选:</span>
    <input v-model="allChecked" type="checkbox" />
    <button @click="reverseChecked">反选</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <input v-model="item.c" type="checkbox" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <input type="text" v-model="count" />
    <button @click="clickOp">press</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
      count: "",
      obj: {
        a: 1,
      },
    };
  },
  computed: {
    // 全选
    allChecked: {
      get() {
        return this.arr.every((e) => e.c);
      },
      set(value) {
        this.arr.forEach((e) => (e.c = value));
      },
    },
  },
  methods: {
    clickOp() {
      this.obj.a = 2;
    },
    reverseChecked() {
      this.arr.forEach((e) => {
        e.c = !e.c;
      });
    },
  },
  // 属性监听器（数据监听器）-数据发生变化是执行，写业务逻辑
  watch: {
    // key 要监听的属性名
    // value函数
count:{
  handler(nweVal, oldVal){
    console.log(nweVal, oldVal);
  }
},
    obj: {
      // handler 函数
      handler(nweVal, oldVal) {
        console.log(nweVal, oldVal);
      },
      // 深度监听-监听对象属性变化
      deep: true,
      //是否需要在代码刚执行时就触发监听器
      immediate: true,
    },
  },
};
</script>

<style>
</style>